<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core" xmlns:c="http://java.sun.com/jsp/jstl/core">

    <ui:composition template="layout.xhtml">
        <ui:define name="body">
            <h:form  id="odontogramaform" enctype="multipart/form-data">
                <p:remoteCommand name="rmtcodigodente" 
                                 actionListener="#{managerOdontograma.reloadOpcoes()}"
                                 process="@this, :odontogramaform:codigodente, :odontogramaform:atecodigodente" 
                                 update=":formdialog:panelDenteConfiguracao" oncomplete="configuracaoDente.show();"/>
                <p:remoteCommand name="rmtcodigodenteprocedimento" 
                                 process="@this, :odontogramaform:codigodente, :odontogramaform:atecodigodente" 
                                 update=":formdialog:panelDenteProcedimento" onstart="procedimentoDente.show();"/>
                <h:inputHidden id="codigodente" value="#{managerOdontograma.codDente}" />
                <h:inputHidden id="atecodigodente" value="#{managerOdontograma.ateCodDente}" />

                <h1 class="title">
                    <a href="#" class="back" onclick="history.go(-1)"/>
                    Odontograma
                </h1>

                <p:messages autoUpdate="true" closable="true"/>
                
                <p:commandButton value="Imprimir"
                                 onclick="printodontograma();" style="float:right; margin-top: 10px;"
                                 immediate="true" icon="ui-icon-print" />

                <p:commandButton id="btnprint"
                                 widgetVar="btnprint2"
                                 actionListener="#{managerOdontograma.gera()}"
                                 style="float:right; margin-top: 10px; display:none;"
                                 onclick="form.target='_black'"
                                 update="@form" ajax="false"/>

                <h:inputHidden id="imagemodonto" value="#{managerOdontograma.imagem}" />

                <p:remoteCommand name="remoteprint" 
                                 oncomplete="btnprint2.jq.click();"
                                 process="@form" update="@form" 
                                 actionListener="#{managerOdontograma.print()}"/>

                <div class="row">
                    <div class="twelve columns"> 
                        <fieldset>
                            <legend><h4><h:outputText  value="#{managerOdontograma.customer.gender eq 'MASCULINO' ? 'Sr. ':'Sra. '}#{managerOdontograma.customer.name}#{managerOdontograma.age ne '0' ? ' - ' : ''}#{managerOdontograma.age ne '0' ? managerOdontograma.age : ''}#{managerOdontograma.age ne '0' ? ' Anos' : ''}"/></h4></legend>
                            <p:panel style="background: none; border: none; margin-top: -30px;" 
                                     styleClass="container_24 clearfix">

                                <p:outputLabel value="Estado Civil:" styleClass="grid_5"/>
                                <h:outputText styleClass="grid_12" value="#{managerOdontograma.customer.civilStatus.name}"/>
                                <div class="clear"></div>
                                <p:outputLabel value="E-mail:" styleClass="grid_5"/>
                                <h:outputText styleClass="grid_12" value="#{managerOdontograma.customer.email}"/>
                                <div class="clear"></div>
                                <p:outputLabel value="Telefone:" styleClass="grid_5"/>
                                <h:outputText styleClass="grid_6" value="#{managerOdontograma.customer.phone}"/>
                                <p:outputLabel value="Celular:" styleClass="grid_5"/>
                                <h:outputText styleClass="grid_6" value="#{managerOdontograma.customer.cellular}"/>

                            </p:panel>
                        </fieldset>

                        <fieldset>
                            <legend> <h4 style="margin:0 0 10px 0">Odontograma</h4></legend>
                            <div id="odont" class="container_24 clearfix" style="text-align: right;">
                                <div class="grid_13"/>
                                <p:outputLabel value="Classificação:" styleClass="grid_3"/>
                                <div class="grid_7">
                                    <p:selectOneMenu style="width: 100%;" panelStyle="width:150px;" 
                                                     value="#{managerOdontograma.tipoDente}" >
                                        <f:selectItems value="#{managerOdontograma.tiposDentes()}" />
                                    </p:selectOneMenu>
                                </div>
                                <div class="grid_1" >
                                    <p:commandButton actionListener="#{managerOdontograma.classficacaoDente()}" 
                                                     update="@form" process="@form"
                                                     styleClass="clearfix" icon="ui-icon-disk" />
                                </div>
                            </div>
                            <div class="clear"/>
                            <p:panel id="panelDentes" style="background: none; border: none;" 
                                     styleClass="container_24 clearfix ">
                                <ui:repeat value="#{managerOdontograma.superiores}" var="sup">

                                    <ui:repeat value="#{sup.tratamentos}" var="trat2">
                                        <img class="dente" data-codigo="#{sup.codigo}" data-ausente="#{sup.ausente}"
                                             style="position: absolute; margin-top: -20px;"
                                             src="procedure/#{sup.codigo}#{trat2.procedimentos.cod}.png"
                                             width="51" />
                                    </ui:repeat>
                                    <img class="dente" data-codigo="#{sup.codigo}" data-ausente="#{sup.ausente}"
                                         style="position: absolute; margin-top: -20px; display: #{!sup.ausente ? 'none':'inline'}"
                                         src="dentes/S/ausente.png"
                                         width="51" />
                                    <img class="dente" data-codigo="#{sup.codigo}" data-ausente="#{sup.ausente}"
                                         src="dentes/S/#{sup.existe ? 'S':''}#{sup.existe ? sup.codigo:'inexistente'}.png"

                                         width="51" />

                                </ui:repeat>
                                <div class="clear"/>
                                <div class="grid_24">
                                    <ui:repeat value="#{managerOdontograma.superiores}" var="sup1">
                                        <div style="display:block; width: 52px; height: 20px; float: left; text-align: center; border: 1px solid #000;">
                                            <a href="#" class="dente"
                                               style="#{sup1.existe ? '':'display:none'}#{sup1.ausente ? 'text-decoration: line-through':''}"
                                               data-codigo="#{sup1.codigo}" data-ausente="#{sup1.ausente}" >
                                                #{sup1.codigo}
                                            </a>
                                        </div>
                                    </ui:repeat>
                                </div>
                                <div class="clear"/>
                                <div class="grid_24">
                                    <ui:repeat value="#{managerOdontograma.inferiores}" var="inf1">
                                        <div style="display:block; width: 52px; height: 20px; float: left; text-align: center; border: 1px solid #000;">
                                            <a href="#" class="dente"
                                               style="#{inf1.existe ? '':'display:none'}#{inf1.ausente ? 'text-decoration: line-through':''}"
                                               data-codigo="#{inf1.codigo}" data-ausente="#{inf1.ausente}" >
                                                #{inf1.codigo}
                                            </a>
                                        </div>
                                    </ui:repeat>
                                </div>
                                <div class="clear"/>
                                <ui:repeat value="#{managerOdontograma.inferiores}" var="inf">
                                    <ui:repeat value="#{inf.tratamentos}" var="trat3">
                                        <img class="dente" data-codigo="#{inf.codigo}" data-ausente="#{inf.ausente}"
                                             style="position: absolute; margin-top: 20px;"
                                             src="procedure/#{inf.ausente ? 'ausente':''}#{inf.ausente ? '':inf.codigo}#{trat3.procedimentos.cod}.png"
                                             width="51" />
                                    </ui:repeat>
                                    <img class="dente" data-codigo="#{inf.codigo}" data-ausente="#{inf.ausente}"
                                         style="position: absolute; margin-top: -20px; display: #{!inf.ausente ? 'none':'inline'}"
                                         src="dentes/S/ausente.png"
                                         width="51" />
                                    <img class="dente" data-codigo="#{inf.codigo}" data-ausente="#{inf.ausente}"  
                                         src="dentes/S/#{inf.existe ? 'S':''}#{inf.existe ? inf.codigo:'inexistente'}.png"
                                         width="51"/>
                                </ui:repeat>

                                <div class="clear"/>
                                <div class="container_24 clearfix">
                                    <ui:repeat value="#{managerOdontograma.denteGeral.tratamentos}" var="tratgeral">
                                        <img class="dente" data-codigo="#{managerOdontograma.denteGeral.codigo}" data-ausente="#{managerOdontograma.denteGeral.ausente}"
                                             style="margin-top: 20px;"
                                             alt="#{tratgeral.procedimentos.name}"
                                             title="#{tratgeral.procedimentos.name}"
                                             src="procedure/#{managerOdontograma.denteGeral.ausente ? 'ausente':''}#{managerOdontograma.denteGeral.ausente ? '':managerOdontograma.denteGeral.codigo}#{tratgeral.procedimentos.cod}.png"
                                             width="51" />
                                    </ui:repeat>
                                    <br/>
                                    <br/>
                                </div>

                            </p:panel> 
                        </fieldset>
                        <fieldset>
                            <legend> <h4 style="margin:0 0 10px 0">Tratamento</h4></legend>
                            <p:panel id="paneltratamento" styleClass="container_24 clearfix" 
                                     style="background: none; border: none;" >
                                <p:dataTable id="resumeprocedure" emptyMessage="Não há registro" 
                                             value="#{managerOdontograma.dentes}" var="dp" rowIndexVar="t">
                                    <f:facet name="header">
                                        Procedimentos
                                    </f:facet>
                                    <p:column headerText="Dente"  width="20">
                                        #{dp.codigo}
                                    </p:column>
                                    <p:column headerText="Procedimento">

                                        <p:dataTable var="trat1" value="#{dp.tratamentos}" rowIndexVar="t1">
                                            <p:column  width="30">  
                                                <p:commandButton icon="ui-icon-search" onclick="procedimentoDente.show();" 
                                                                 actionListener="#{managerOdontograma.visualizarProcedimento(t,t1)}"
                                                                 immediate="true"
                                                                 process="@this" update="@this, :formdialog:panelDenteProcedimento" />
                                                <p:commandButton icon="ui-icon-trash" 
                                                                 actionListener="#{managerOdontograma.remover(t,t1)}"
                                                                 immediate="true"
                                                                 process="@this" update="@this, :odontogramaform:paneltratamento" />
                                            </p:column> 
                                            <p:column width="400">
                                                <h:outputText value="#{trat1.procedimentos.name}" />
                                                <ui:repeat value="#{trat1.faceDente}" var="fac1">
                                                    #{fac1.nome}, 
                                                </ui:repeat>
                                            </p:column>
                                            <p:column>
                                                <h:outputText value="#{trat1.statusTratamento.nome}" />
                                            </p:column>
                                            <p:column width="20">
                                                <h:outputText value="#{trat1.valor}" >
                                                    <f:convertNumber type="currency" />
                                                </h:outputText>
                                            </p:column>
                                        </p:dataTable>
                                        <f:facet name="footer" > 
                                            <h:outputText value="Total:" style="float: right; font-weight:bold;"/>
                                        </f:facet>
                                    </p:column>
                                    <p:column headerText="Valor" style="text-align: right;">
                                        <h:outputText value="#{managerOdontograma.valorTratamentoPorDente(dp)}">
                                            <f:convertNumber type="currency" />
                                        </h:outputText>

                                        <f:facet name="footer" > 
                                            <h:outputText value="#{managerOdontograma.totalValorTratamento()}" style="float: right; font-weight:bold;">
                                                <f:convertNumber type="currency" />
                                            </h:outputText>
                                        </f:facet>
                                    </p:column>

                                </p:dataTable>
                            </p:panel>
                        </fieldset>
                        <fieldset>
                            <legend> <h4 style="margin:0 0 10px 0">Lançamentos</h4></legend>
                            <p:panel id="panellancamentos" styleClass="container_24 clearfix" 
                                     style="background: none; border: none;" >
                                <p:outputLabel for="valor" value="Valor:" styleClass="grid_4"/> 
                                <p:inputText id="valor" styleClass="grid_5" 
                                             value="#{managerOdontograma.income.amount}"
                                             onkeypress="jQuery(this).autoNumeric({aSign:'R$ ', aSep: '.', aDec: ','} );">
                                    <f:convertNumber type="currency" locale="pt,BR"/>
                                </p:inputText>

                                <p:outputLabel for="date" value="Em:" styleClass="grid_2"/>  
                                <p:calendar id="date" showOn="button" styleClass="grid_5" 
                                            value="#{managerOdontograma.income.createAt}"
                                            pattern="dd/MM/yyyy" locale="pt"/>  

                                <div class="clear"/>
                                <p:outputLabel value="Forma de Pagamento:" styleClass="grid_4"/> 
                                <div class="grid_12">
                                    <p:selectOneMenu style="width: 108%;" panelStyle="width:150px;" 
                                                     value="#{managerOdontograma.paymentType}" >   
                                        <f:selectItems value="#{managerOdontograma.selectPaymentType()}" />
                                    </p:selectOneMenu>
                                </div>
                                <div class="clear"/>
                                <div class="buttonAction">
                                    <p:commandButton value="Adicionar"  
                                                     actionListener="#{managerOdontograma.addLancamento()}"
                                                     icon="ui-icon-disk"
                                                     process=":odontogramaform:panellancamentos" update=":odontogramaform:panellancamentos"/>
                                </div>

                                <p:dataTable id="lancamentostable" styleClass="grid_24" emptyMessage="Não há lançamentos"
                                             value="#{managerOdontograma.incomes}" var="in">
                                    <f:facet name="header">
                                        Pagamentos
                                    </f:facet>
                                    <p:column headerText="Data">
                                        <h:outputText value="#{in.createAt}">
                                            <f:convertDateTime pattern="dd/MM/yyy" />
                                        </h:outputText>
                                    </p:column>
                                    <p:column headerText="Usuário">
                                        <h:outputText value="#{in.systemUser.name}"/>
                                    </p:column>
                                    <p:column headerText="Valor">
                                        <h:outputText value="#{in.amount}">
                                            <f:convertNumber pattern="#0.00" />
                                        </h:outputText>
                                    </p:column>
                                </p:dataTable>
                            </p:panel>
                        </fieldset>
                        <div class="buttonAction">
                            <p:commandButton value="Concluir"  
                                             actionListener="#{managerOdontograma.concluir()}"
                                             styleClass="ui-priority-primary" icon="ui-icon-disk"
                                             process="@form" update="@form"/>
                        </div>
                    </div>
                </div>

                <script>
                
                    $(document).ready(function() {
                        $(".dente").on("click", function(event){
                            event.preventDefault(); 
                            $('#odontogramaform\\:codigodente').val($(this).attr("data-codigo"));
                            $('#odontogramaform\\:atecodigodente').val($(this).attr("data-codigo"));
                            rmtcodigodenteprocedimento();
                        });
                    
                        $(".dente").on("contextmenu", function(event){
                            event.preventDefault(); 
                            if (event.which === 3){
                                $('#odontogramaform\\:codigodente').val($(this).attr("data-codigo"));
                                $('#odontogramaform\\:atecodigodente').val($(this).attr("data-codigo"));
                                rmtcodigodente();
                            }
                        });
                    
                    });
            
                </script>

                <script type="text/javascript">
                    function printodontograma() {
                        html2canvas(document.getElementById("odontogramaform:panelDentes"), {
                            onrendered: function(canvas) {
                                
                                var img = canvas.toDataURL("image/png", "1.0");
                                var output = img.replace(/^data:image\/(png|jpg);base64,/, "");

                                document.getElementById("odontogramaform:imagemodonto").value = output;
                                
                                remoteprint();
                            }
                        });
                    } 
                    
                    
                </script>
            </h:form>
            <h:form id="formdialog">
                <p:dialog id="dialog" header="Dente - Configuração" modal="true" widgetVar="configuracaoDente" 
                          width="600" height="130" resizable="false" dynamic="true">
                    <f:ajax event="close"  listener="#{managerOdontograma.reinit()}"  />
                    <p:panel id="panelDenteConfiguracao" style="background: none; border: none;" 
                             styleClass="container_24 clearfix">

                        <p:outputLabel value="De:" styleClass="grid_5"/>
                        <p:inputText value="#{managerOdontograma.codDente}" styleClass="grid_3" />
                        <p:outputLabel value="Até:" styleClass="grid_2"/>
                        <p:inputText value="#{managerOdontograma.ateCodDente}" styleClass="grid_3" />
                        <div class="clear"/>
                        <p:outputLabel value="Classificação:" styleClass="grid_5"/>
                        <div class="grid_18">
                            <p:selectOneMenu panelStyle="width:150px;" 
                                             value="#{managerOdontograma.tipoDente}" >
                                <f:selectItems value="#{managerOdontograma.tiposDentes()}" />
                            </p:selectOneMenu>
                        </div>

                        <div class="clear"/>
                        <p:outputLabel value="Ausente?:" styleClass="grid_5"/>
                        <p:selectBooleanCheckbox styleClass="grid_2" value="#{managerOdontograma.ausente}"/>
                        <div class="clear"/>

                    </p:panel>denteGeral = new Dente();
                    <f:facet name="footer">
                        <div class="buttonAction">

                            <p:commandButton value="Salvar" actionListener="#{managerOdontograma.addConfiguracaoDente()}" 
                                             process="@this, :formdialog:panelDenteConfiguracao"
                                             update="@this, :formdialog:panelDenteConfiguracao, :odontogramaform"
                                             oncomplete="configuracaoDente.hide();"
                                             styleClass="ui-priority-primary" icon="ui-icon-disk"/>

                        </div>
                    </f:facet>
                </p:dialog>
                <p:dialog id="dialogprocedimento" header="Dente - Procedimento" modal="true" widgetVar="procedimentoDente" 
                          width="700" height="300" resizable="false" dynamic="true">
                    <f:ajax event="close"  listener="#{managerOdontograma.reinit()}"  />
                    <p:panel id="panelDenteProcedimento" style="background: none; border: none;" 
                             styleClass="container_24 clearfix">

                        <p:outputLabel value="De:" styleClass="grid_5"/>
                        <p:inputText value="#{managerOdontograma.codDente}" styleClass="grid_3" />
                        <p:outputLabel value="Até:" styleClass="grid_2"/>
                        <p:inputText value="#{managerOdontograma.ateCodDente}" styleClass="grid_3" />
                        <div class="clear"/>
                        <p:outputLabel for="procedure" value="Procedimento:" styleClass="grid_5"/>  
                        <p:inputText value="#{managerOdontograma.procedure.name}" 
                                     disabled="#{managerOdontograma.procedure.id eq null ? true:false}"
                                     onclick="dlgProcedureDialog.show();"
                                     id="procedure" readonly="true"  styleClass="grid_17" style="margin-right:0px;"/>

                        <p:commandButton  icon="ui-icon-plus" process="@this" immediate="true"
                                          styleClass="ui-button-icon-only"  type="button" 
                                          style="width: 25px; height: 28px; margin-left:0px;" 
                                          title="Adicionar Procedimento" alt="Adicionar Procedimento"
                                          onclick="dlgProcedureDialog.show();"/>
                        <div class="clear"/>
                        <p:outputLabel value="Face do Dente:" styleClass="grid_5"/>
                        <p:selectManyCheckbox id="selectFace" converter="facedenteconverter"
                                              value="#{managerOdontograma.selectFaceDentes}" 
                                              styleClass="grid_18">
                            <f:selectItems value="#{managerOdontograma.faceDentes}" 
                                           var="fd" itemLabel="#{fd.cod}" itemValue="#{fd}" />
                        </p:selectManyCheckbox>

                        <div class="clear"/>
                        <p:outputLabel value="Fase Tratamento:" styleClass="grid_5"/>
                        <div class="grid_18">
                            <p:selectOneMenu style="width:102%;" panelStyle="width:150px;" 
                                             value="#{managerOdontograma.statusTratamento}" >
                                <f:selectItems value="#{managerOdontograma.statusTratamento()}" />
                            </p:selectOneMenu>
                        </div>

                        <div class="clear"/>
                        <div class="buttonAction">
                            <p:commandButton value="Adicionar" actionListener="#{managerOdontograma.addProcedimentoDente()}" 
                                             process="@this, :formdialog:panelDenteProcedimento"
                                             update=":formdialog:panelDenteProcedimento, :odontogramaform"
                                             onclick="procedimentoDente.hide();"
                                             styleClass="ui-priority-primary" icon="ui-icon-disk"/>
                        </div>
            
                    </p:panel>
                </p:dialog>

                <p:dialog id="dlgProcedure"  widgetVar="dlgProcedureDialog"
                          header="Pesquisar Procedimento" modal="true"
                          width="800"  dynamic="true" resizable="false"> 
                    <p:ajax event="close" update="procedurePanelSearch" listener="#{managerDiary.initProcedure()}" /> 
                    <p:messages autoUpdate="true" closable="true"/>

                    <p:panel id="procedurePanelSearch" style="background: none; border: none;" 
                             styleClass="container_24 clearfix ">

                        <p:outputLabel value="Cód:" styleClass="grid_3"/>
                        <p:inputText styleClass="grid_3" value="#{managerOdontograma.procedureSearch.cod}"/>
                        <p:outputLabel value="Nome:" styleClass="grid_2"/>
                        <p:inputText styleClass="grid_14" value="#{managerOdontograma.procedureSearch.name}"/>
                        <div class="clear"/>
                        <div class="buttonAction">
                            <p:defaultCommand target="search-button-procedure" />
                            <p:commandButton id="search-button-procedure" value="Pesquisar" icon="ui-icon-search"
                                             update=":formdialog:procedurePanelSearch" process=":formdialog:procedurePanelSearch"
                                             actionListener="#{managerOdontograma.listProcedure()}"
                                             styleClass="ui-priority-primary" />
                        </div >

                        <p:dataTable id="tablePro" var="p" value="#{managerOdontograma.procedures}" 
                                     styleClass="grid_24"
                                     rowIndexVar="rowid"
                                     rowKey="#{p.id}"
                                     rows="5" paginator="true"  
                                     paginatorPosition="bottom"
                                     selectionMode="single"
                                     selection="#{managerOdontograma.procedureSelect}"
                                     emptyMessage="Nenhum registro">  
                            <f:facet name="header">
                                Procedimentos
                            </f:facet>
                            <p:ajax event="rowSelect"  process="@this" update="@this"/>
                            <p:ajax event="rowUnselect"  process="@this" update="@this"/>
                            <p:column headerText="Cod">  
                                <h:outputText value="#{p.cod}"/>
                            </p:column>  
                            <p:column headerText="Nome">  
                                <h:outputText value="#{p.name}"/>
                            </p:column>
                            <p:column headerText="Duração">  
                                <h:outputText value="#{p.duration}"/>
                            </p:column>
                        </p:dataTable> 

                        <div class="buttonAction">
                            <p:commandButton value="Selecionar" icon="ui-icon-search"
                                             update="@this, :formdialog:procedure" 
                                             process="@this, :formdialog:procedurePanelSearch" 
                                             actionListener="#{managerOdontograma.selectProcedureDialog()}"
                                             oncomplete="dlgProcedureDialog.hide();" />


                        </div>
                    </p:panel>
                </p:dialog>

            </h:form>

        </ui:define>
    </ui:composition>

</html>
